<template>
  <div class="hdgk-app">
    <a-layout>
      <!-- Header -->
      <a-layout-header class="header" style="height: 78px;padding-top: 7px;">
        <a-row>
          <a-col class="header-left" :xxl="2" :xl="2" :lg="2" :md="2" :sm="0" :xs="0" />
          <a-col class="header-left" :xxl="10" :xl="10" :lg="10" :md="10" :sm="24" :xs="24">
            <router-link id='logo' to="/">
              <img src="@/assets/logo.png" alt="logo">
              <span class="title">
                <span class="title__top" v-html="title"></span>
                <span class="title__bottom" v-html="address"></span>
              </span>
            </router-link>
          </a-col>
          <a-col class="header-left" :xxl="10" :xl="10" :lg="10" :md="10" :sm="0" :xs="0">
            <p v-html="dateStatus" class="weather"></p>
          </a-col>
          <a-col class="header-left" :xxl="2" :xl="2" :lg="2" :md="2" :sm="0" :xs="0" />
        </a-row>
      </a-layout-header>

      <transition name="fade-transform" mode="out-in">
        <router-view />
      </transition>

      <a-layout-footer style="text-align: center">
        <p v-html="'Copyright © 2001-2015 Visited All Rights Reserved 港口旅游局'"></p>
        <p v-html="'备案/许可证编号：粤ICP备88888888号'"></p>
      </a-layout-footer>
    </a-layout>
  </div>
</template>

<script>
import {invoke} from "@/api";
export default {
  name: "app",
  data() {
    return {
      title: "港口旅游政务网",
      address: "www.hdgk.lv.cn",
      dateStatus: moment().format("YYYY年MM月DD日")
    };
  },
  mounted() {
    this.getWheather()
  },
  methods: {
    getWheather() {
      invoke("api/WTM.HomePage.getNotCheckWeather", {
        pageCode: "WTM.HomePage.List"
      }).then((res) => {
        this.dateStatus = ""
        this.dateStatus = moment().format("YYYY年MM月DD日") + `, 港口镇, ${res.data.weather} ${res.data.temperature}℃`
      })
    }
  }
};
</script>

<style lang="scss">
body,
html {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  background-color: #f9f9f9;
}

::-webkit-scrollbar {
  // width: 8px;
  // height: 8px;
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-track {
  background-color: #d9d9d9;
  border-left: 2px solid transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #b3b3b3;
  border-left: 2px solid transparent;
}

/* fade */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.28s;
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
}

/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all .5s;
}
.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}
.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/*breadcrumb transition*/
.breadcrumb-enter-active,
.breadcrumb-leave-active {
  transition: all .5s;
}

.breadcrumb-enter,
.breadcrumb-leave-active {
  opacity: 0;
  transform: translateX(20px);
}

.breadcrumb-move {
  transition: all .5s;
}

.breadcrumb-leave-active {
  position: absolute;
}

.hdgk-app {
  .ant-layout-footer {
    background: #3e4245;
    height: 90px;

    p {
      color: rgba(255, 255, 255, 0.3);
      font-size: 12px;
    }
  }
}
</style>
